<template>
	<view>
		<view class="detailTop">
			<view class="navImg">
				<image :src = "titleImg" mode="widthFix"></image>
			</view>
			<scroll-view class = 'navList' scroll-x="true" enable-flex = 'true' >
				<view class="listItem" @tap="bindToView" v-for="item in list" :data-id = '"s" +item.id'>{{item.name}}</view>
			</scroll-view>
		</view>
		<view class="content">
			<scroll-view class="scroller" :scroll-into-view="toWhere" scroll-y="true">
				<view class="detailClassify" v-for="(item,key) in titleDetail">
					<view class="classifyName" :id ='"s" +key'>————{{item.title}}————</view>
					<view class="classifyShow" v-for=" term in item.titleDetail">
						<view class="showImg">
							<image :src="term.goodsImg" mode="widthFix"></image>
						</view>
						<view class="showDetail">
							<view class="goodsName">{{term.goodsName}}</view>
							<view class="goodsDiscrible">{{term.goodsPurpose}}</view>
							<view class="goodsNum"><text>{{term.goodsSpecs}}</text></view>
							<view class="goodsPrice">
								<text>￥{{term.presentPrice}}</text>
								<text>￥{{term.originalPrice}}</text>
							</view>
							<view class="oprate" @click="addCar" :data-goods = 'term' >
								<gouwuche class="add" ></gouwuche>
							</view>
						</view>
					</view>
					
				</view>
			</scroll-view>
		</view>
		<car :price = 'price'></car>
	</view>
</template>

<script>
	import gouwuche from '../../until/com/gouwuche.vue'
	import car from '../../until/com/car.vue'
	import * as url from '../../until/api.js'
	import until from '../../until/until.js'
	export default {
		data() {
			return {
				titleImg:'',
				titleDetail:[],
				list:[],
				toWhere:'',
				price:0,
			}
		},
		components:{
			car,
			gouwuche,
		},
		onShow(){
		            this.price=parseInt(until.getMoneyNum());   //将价格传给购物车小图标
		        },
		methods: {
			bindToView:function(e){
				this.toWhere = e.currentTarget.dataset.id
			},
			addCar(e){
				let goods = e.currentTarget.dataset.goods
				let obj = {
					name:goods.goodsName,
					price:goods.presentPrice,
					imgSrc:goods.goodsImg,
					guiGe:goods.goodsSpecs
				}
				until.addToCar(obj);
				console.log('我要传参了')
				this.price = parseInt(until.getMoneyNum());
			}
		},
		created(){
			// wx.setNavigationBarTitle({
			//       title: '动态标题'
			//     })
			uni.request({
				url:url.getFindDetailData,
				method:'POST',
				success:res=>{
					console.log(res.data)
					this.titleImg = res.data.titleImg;
					this.titleDetail = JSON.parse(JSON.stringify(res.data.titleList))
					for(let i = 0; i < res.data.titleList.length; i ++){
						let obj = {
							id:i,
							name:res.data.titleList[i].title,
						}
						this.list.push(obj)
					}
					console.log(this.titleDetail,this.list)
				}
			})
		}
	}
</script>

<style scoped>
	.navImg{
		width: 100%;
	}
	.navImg > image{
		width: 102%;
		margin-left: -1%;
	}
	.content{
		width: 94%;
		margin:  0 auto;
	}
	.scroller{
		height: 25rem;
	}
	.detailClassify{
		
	}
	.classifyName{
		text-align: center;
		height: 2rem;
		line-height: 2rem;
		font-size: 1rem;
		font-weight: bold;
		color: #17B357;
		margin-top: 2rem;
	}
	.classifyShow{
		height: 8rem;
	}
	.showImg{
		float: left;
		height: 8rem;
		width: 30%;
		position: relative;
		overflow: hidden;
	}
	.showImg > image{
		position: absolute;
		width: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
	.showDetail{
		width: 70%;
		float: left;
		position: relative;
	}
	.goodsName,.goodsDiscrible,.goodsNum,.goodsPrice{
		height: 2rem;
		line-height: 2rem;
		text-align: left;
	}
	.goodsName{
		font-size: 1rem;
		font-weight: bold;
	}
	.goodsDiscrible{
		font-size:.9rem;
		color:#808080;
	}
	.goodsNum{
		height: 2rem;
		position: relative;
	}
	.goodsNum > text{
		position: absolute;
		left: 0;
		top: 0;
		height: 1.5rem;
		line-height: 1.5rem;
		font-size: .7rem;
		background-color: #C8C7CC;
		color:#808080 ;
	}
	.goodsPrice > text:nth-of-type(1){
		float: left;
		color: #f40;
		font-size: 1.2rem;
	}
	.goodsPrice > text:nth-of-type(2){
		float: left;
		color:#808080 ;
		text-decoration: line-through;
		margin-left: .2rem;
		font-size: .8rem;
	}
	.oprate{
		width: 1rem;
		height: 1rem;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.add{
		width: 1rem!important;
		height: 1rem!important;
		position: absolute;
		left: -1rem;
		top: -1rem;
	}
	.navList{
		height: 2rem;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	.listItem{
		flex-shrink:0;
		width: 5rem;
		height: 2rem;
		font-size: .9rem;
		text-align: center;
		line-height: 2rem;
		margin-right: 1rem;
	}
	
</style>
